<template>
  <div class="bg-gray h-100 nav-no-scroll d-flex flex-column">
    <div class="bg-green py-2 px-4 d-flex">
      <el-input
         ref="input"
         class="input-radius"
         placeholder="请输入关键字"
         prefix-icon="el-icon-search"
         @focus="show = true"
         @blur="show = false"
         @keyup.enter.native="search()"
         v-model="keyword">
       </el-input>
       <el-button v-show="show" type="text ml-3 text-white" style="height: 30px;line-height: 30px;padding: 0;" @click="search()">搜索</el-button>
    </div>
    <div ref="viewport" class="navigator-component">
      <scroll ref="scroll" direction="horizontal">
        <el-tabs v-model="enterpriseName" @tab-click="search">
          <el-tab-pane label="通知公告" name="134A9C15597F11E892D5A46C2A38CB5E" class="text-tdsuccess">
          </el-tab-pane>
          <el-tab-pane label="协会动态" name="1FD5A57D597F11E892D5A46C2A38CB5E">
          </el-tab-pane>
          <el-tab-pane label="产业新闻" name="24C1306A597F11E892D5A46C2A38CB5E">
          </el-tab-pane>
          <el-tab-pane label="会员新闻" name="29A9C63B597F11E892D5A46C2A38CB5E">
          </el-tab-pane>
        </el-tabs>
      </scroll>
    </div>
    <div class="span" style="margin-top: 10px;" v-loading="ecs.loading && ecs.pageIndex === 1">
      <scroll
            ref="scroll"
            :mouse-wheel="true"
            :pull-up-load="pullUpLoad"
            :scrollbar="true"
            @pullingUp="pullingUp"
            >
        <div class="card border-top border-bottom " style="border: none;" v-show="ecs.rows.length === 0">
          <div class="card-body text-center">
            <p>暂无数据</p>
          </div>
        </div>
        <div class="card border-top border-gray-300" :class="{'border-bottom': index === ecs.rows.length - 1}" v-for="(item, index) in ecs.rows" :key="index" style="border: none;border-color: #dee2e6;">
          <div class="card-body" style="padding: 12px;" @click="lookTopic(item)">
            <blockquote class="blockquote mb-0">
              <p class="fz-15" style="line-height: 18px;margin-bottom: 8px;">{{item.basicTitle}}</p>
              <footer class="d-flex justify-content-between fz-12" style="color: #ced4da;">
                <div>
                  <span>{{$formatDateTime(item.ctime)}}</span>
                </div>
                <div>
                  <span class="el-icon-view text-tdsuccess" style="padding-top: 3px;margin-right: 3px;"></span>
                  <span>{{item.browseNumber}}</span>
                </div>
              </footer>
            </blockquote>
          </div>
        </div>
      </scroll>
    </div>
  </div>

</template>

<script>
import PagedList from '../../plugins/PagedList'
export default {
  name: "advisorylist",
  title: "资讯列表",
  data () {
    return {
      ecs: new PagedList('/mscs/information/findInformationBasicByType', 10),
      pullUpLoad: {
        txt: {
          more: '加载更多',
          noMore: '没有了'
        }
      },
      enterpriseName: '134A9C15597F11E892D5A46C2A38CB5E',
      keyword: '',
      show: false
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    search() {
      this.$refs.input.blur()
      this.ecs.search({type: this.enterpriseName, search: this.keyword})
    },
    pullingUp () {
      if (!this.ecs.hasMore) {
        this.$refs.scroll.forceUpdate(this.ecs.hasMore)
        return
      }
      this.ecs.addLoad().then(() => {
        this.$refs.scroll.forceUpdate(this.ecs.hasMore)
      })
    },
    lookTopic (row) {
      // this.$router.push({name: 'advisorydetails', params: {row: row}}) 
      // this.$router.push({name: 'advisorydetails', query: {row: JSON.stringify(row)}})
      this.$router.push({name: 'advisorydetails', query: {informationId: row.modelId, browseNumber: row.browseNumber, comments: row.comments}})
    }
  }
}
</script>
